@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');

  body {
      font-family: 'Josefin Sans', sans-serif;
      overflow: hidden;
      display: none;
      height: 100%;
      z-index: 999;
  }
  
  div {
      display: block;
  }
  
  .scroll-container::-webkit-scrollbar {
      width: 0.5em;
  }
  
  .scroll-container::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }
  
  .scroll-container::-webkit-scrollbar-thumb {
    background-color: rgb(89, 0, 255);
    outline: 1px solid #313131;
    border-radius: 5px;
  }
  
  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      margin: 0;
  }
  
  input[type=number] {
      /* border: 0 !important; */
      -webkit-appearance: none;
      -moz-appearance: none;
      box-shadow: none !important;
  }
  input[type=number]:active {
      border-bottom-color: rgb(0, 136, 255) !important;
  }
  
  button {
      background-color: rgba(100, 100, 101, 0.8) !important;
      border-color: rgb(0, 106, 255) !important;
  }
  
  #clothes-container,
  #barber-container,
  #tats-container {
      background-color: rgba(5, 5, 5, 0.767);
      border-radius: 0px;
      overflow: hidden;
      transform: scale(1);
      height: 100%;
      top: 0%;
      position: absolute;
      right: 0%;
      width: 500px;
      color: #e7e7e7 !important;
      padding-top: 2%;
  }
  
  .scroll-container {
      padding: 0px !important;
      margin: 0px !important;
      overflow-y: scroll;
      overflow-x: hidden;
      height: calc(100% - 148px);
      width: 100%;
  }
  
  #camera-container {
      /* width: 500px; */
      height: 110%;
      /* margin: auto; */
      position: relative;
      top: -10%;
      left: 40%;
      background-color: #313131;
      border-radius: 0px;
      transform: scale(0.75);
  }
  #button_menu {
      font-family: 'Josefin Sans', sans-serif;
      display: flex;
      flex-direction:row;
      flex-wrap:wrap;
  }
  #button_menu > button {
      font-family: 'Josefin Sans', sans-serif;
      /* width: calc(33.3% - 3px) !important; */
      /* display: inline-flex !important; */
      /* flex: 0 20%; */
      flex-grow: 1;
  }
  
  h6 {
      color: #e7e7e7 !important;
  }
  
  .input-number {
      /* margin: 0px 15; */
      color: #fafafa !important;
      text-align: center;
      /* width: 50px !important; */
  font-family: 'Josefin Sans', sans-serif;
  }
  
  .panel {
      padding: 0px !important;
      margin: 10px 10px !important;
      border-radius: 0px;
      width: calc(100% - 20px) !important;
      background-color: transparent;
      overflow: hidden;
  }
  
  .panel-title {
      background-color: rgb(0, 102, 255);
  }
  .panel-title > h6 {
      font-weight: bold !important;
  }
  
  .panel-label {
      margin: 5px !important;
  }
  
  .panel-bottom {
      background-color: rgb(0, 41, 65)
      padding: 10px !important;
  }
  
  button.button-menu {
      background-color: rgba(73, 72, 74, 0.8) !important;
      border-radius: 5px;
  }
  button.button-menu.active {
      background-color: rgb(0, 41, 65) !important;
  }
  
  
  .color_palette {
      border-radius: 2px;
      border: 2px solid #e7e7e7;
      margin: 4px;
      width: 40px;
      height: 40px;
      display: inline-flex;
  }
  .color_palette:hover {
      border: 2px solid rgb(0, 102, 255) !important;
  }
  .color_palette.active {
      border: 2px solid rgb(0, 110, 255) !important;
  }
  
  .collapsible {
      background-color: rgb(0, 41, 65) !important;
      color: #e7e7e7 !important;
      border-color: rgba(50, 50, 50, 0.8) !important;
  }
  .collapsible-header {
      background-color: rgba(70, 70, 71, 0.8) !important;
      color: #e7e7e7 !important;
  }
  .collapsible-body {
      border-color: rgb(0, 41, 65) !important;
      padding: 15px !important;
  }
  
  
  
  
  /* .slidecontainer {
      width: 50%;
      margin: 0px 5px;
  }
  
  .slider {
      -webkit-appearance: none !important;
      width: 100% !important;
      background: #414141 !important;
      background-color: #414141 !important;
      outline: none !important;
      opacity: 0.7 !important;
      -webkit-transition: opacity .15s ease-in-out !important;
      transition: opacity .15s ease-in-out;
      height: 40px !important;
      border: 0px !important;
  }
  
  input[type="range" i] {
      color: #414141 !important;
  }
  
  .slider:hover {
      opacity: 1;
  }
   */
  input:focus,
  input:active {
      border-bottom-color: #00a2ff !important;
  }
  input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: #0073ff !important;
      cursor: pointer;
      border-radius: 2px !important;
  }